<template>
	<view class="food-popup" v-show="suitDetail.suitname">
		<view class="suit-sellpoint">套餐说明<view @click="closePopup" class="closefont"></view></view>
		<scroll-view class="scroll-con" :scroll-y="true">
			<view class="pop-sellpoint">
				<view class="sellpoint">{{suitDetail.sellpoint}}</view>
			</view>
			<view class="suit-banner">
				<view class="swiper">
					<image :src="suitDetail.litpic" mode="aspectFill"></image>
				</view>
			</view>
			<view class="detail-content">
				<view class="attr-list">
					<view class="list-con">
						<view class="first" v-if="suitDetail.max_number!='-1'">限购{{suitDetail.max_number}}份</view>
						<view class="item" v-if="suitDetail.refund_restriction == 1">不可退改</view>
						<view class="item" v-if="suitDetail.refund_restriction == 0">无条件退</view>
						<view class="item" v-if="suitDetail.pay_way == 1">线上支付</view>
						<view class="item" v-if="suitDetail.pay_way == 2">线下支付</view>
						<view class="item" v-if="suitDetail.is_confirm_pay == 0">无需确认</view>
						<view class="item" v-if="suitDetail.is_confirm_pay == 1">支付后确认</view>
						<view class="item" v-if="suitDetail.is_confirm_pay == 2">支付前确认</view>
					</view>
				</view>
				<view class="food-detail-info">
					<view class="item">
						<view class="c-title">菜品介绍</view>
						<view class="content">
							<view class="con-item" v-for="(ditem,dindex) in suitDetail.dishes_list" :key="dindex">
								<view class="hd">{{ditem.dishes_name}} x {{ditem.dishes_number}}</view>
								<text class="bd">{{globalExchangeRate}}{{ditem.dishes_price}}</text>
							</view>
						</view>
					</view>
					<view class="item" v-if="suitDetail.description">
						<view class="c-title">使用说明</view>
						<view class="content"><jyf-parser :html="suitDetail.description"></jyf-parser></view>
					</view>
					<view class="item" v-if="suitDetail.at_least > 0">
						<view class="c-title">起售规则</view>
						<view class="content">
							至少{{suitDetail.at_least}}件起售
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	/**
	 * 套餐详情
	 * 
	 */
	import jyfParser from "@/components/jyf-parser/jyf-parser";
	export default {
		components:{
			jyfParser
		},
		name: 'stfoodDetailInfo',
		props: {
			suitDetail:{
				type:Object,
				default(){
					return {}
				}
			},
			price:{
				type:String,
				default: ''
			},
		},
		data() {
			return {
				couponCurrent: 1,//弹窗swiper
			};
		},
		methods: {
			closePopup(){
				this.$emit('close')
			}
		}
	}
</script>

<style lang="scss">
	.food-popup{
		background-color: $uni-bg-color;
		font-size: $uni-font-size-sm;
		border-radius: 20rpx 20rpx 0 0;
		padding: 0 24rpx;
		.suit-sellpoint{
			position: relative;
			padding: 32rpx 0;
			line-height: 48rpx;
			font-size: $uni-font-size-lg;
			font-weight: bold;
			.closefont{
				position: absolute;
				right: 25rpx;
				top: 50%;
				transform: translateY(-50%);
				width: 26rpx;
				height: 26rpx;
				background: url("https://static.member.stourweb.cn/uniapp/static/images/food-del-close-icon.png") no-repeat;
				background-size: contain;
			}
		}
		.pop-sellpoint{
			margin-top: 8rpx;
			.sellpoint{
				width: 100%;
				font-size: 28rpx;
				font-weight: bold;
				line-height: 1.286;
			}
		}
		.scroll-con{
			max-height: 1200rpx;
			min-height: 100rpx;
			// overflow-y: auto;
		}
		.suit-banner{
			margin-top: 20rpx;
			.swiper{
				position: relative;
				width: 100%;
				height: 702rpx;
				border-radius: 20rpx;
				overflow: hidden;
				image{
					width: 100%;
					height: 702rpx;
					border-radius: 20rpx;
				}
			}
		}
		.detail-content{
			.attr-list{
				padding: 20rpx 0 ;
				font-size: $uni-font-size-mini;
				.list-con{
					@extend .displayflex;
					flex-wrap:wrap;
					margin-left: -8rpx;
					.first{
						height: 36rpx;
						line-height: 36rpx;
						color: #fff;
						padding: 0 14rpx;
						background: linear-gradient(90deg, #ff3617 0%, #ff662a 100%);
						border-radius: 8rpx 4rpx 8rpx 4rpx;
					}
					.item{
						height: 36rpx;
						margin-left: 10rpx;
						padding: 0 10rpx;
						line-height: 36rpx;
						border: 1px solid #ff662a;
						border-radius: 6rpx;
						background: linear-gradient(90deg, #ff3617 0%, #ff662a 100%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}
				}
			}
			.food-detail-info{
				border-top: 1px solid #ededed;
				padding-top: 12rpx;
				.item{
					padding: 30rpx 0 20rpx;
					border-bottom: 1rpx solid $uni-border-color;
					&:last-child{
						border-bottom: none;
					}
					.c-title{
						font-size: $uni-font-size-base;
						font-weight: bold;
						line-height: 60rpx;
					}
					.content{
						margin-top: 16rpx;
						color: $uni-text-color;
						font-size: $uni-font-size-base;
						.con-item{
							width: 100%;
							padding: 4rpx 0;
							font-size: $uni-font-size-base;
							line-height: 60rpx;
							@extend .justifyspacec;
							.hd{
								color: $uni-text-color-grey;
								font-family: Arial, Helvetica, sans-serif;
								.name{
									margin-right: 22rpx;
								}
							}
							.bd{
								color: $uni-text-color;
								font-family: Arial, Helvetica, sans-serif
							}
						}
					}
				}
			}
		}
	}
</style>
